<template>
  <div class="room-card" @click="goRoomDetail">
    <!-- 房间图片区域 -->
    <div class="room-image-container">
      <van-image
        class="room-image"
        :src="data.graphVoList?.[0]?.url || ''"
        fit="cover"
        radius="12px"
      >
        <template v-slot:error>
          <div class="image-error">
            <van-icon name="photo-fail" size="24" />
            <span>加载失败</span>
          </div>
        </template>
        <template v-slot:loading>
          <div class="image-loading">
            <van-loading type="spinner" size="20" />
          </div>
        </template>
      </van-image>
      
      <!-- 价格标签 -->
      <div class="price-badge">
        <span class="price-symbol">￥</span>
        <span class="price-amount">{{ data.rent }}</span>
        <span class="price-unit">/月</span>
      </div>
      
      <!-- 收藏按钮 -->
      <!-- <div class="favorite-btn" @click.stop="toggleFavorite">
        <van-icon :name="isFavorite ? 'heart' : 'heart-o'" :color="isFavorite ? '#ff4757' : '#ffffff'" />
      </div> -->
    </div>

    <!-- 房间信息区域 -->
    <div class="room-info">
      <!-- 标题区域 -->
      <div class="room-title">
        <h3 class="title-text">
          {{ `${data.apartmentInfo?.name || ""} ${data.roomNumber}房间` }}
        </h3>
        <div class="room-status">
          <van-tag type="success" size="mini">可租</van-tag>
        </div>
      </div>

      <!-- 位置信息 -->
      <div class="location-info">
        <van-icon name="location-o" class="location-icon" />
        <span class="location-text">
          {{ `${data?.apartmentInfo?.provinceName || ""} ${data?.apartmentInfo?.cityName || ""} ${data?.apartmentInfo?.districtName || ""}` }}
        </span>
      </div>

      <!-- 标签区域 -->
      <div class="tags-container" v-if="data?.labelInfoList?.length">
        <van-tag
          v-for="item in data.labelInfoList.slice(0, 3)"
          :key="item.id"
          type="primary"
          plain
          size="mini"
          class="room-tag"
        >
          {{ item.name }}
        </van-tag>
        <span v-if="data.labelInfoList.length > 3" class="more-tags">
          +{{ data.labelInfoList.length - 3 }}
        </span>
      </div>

      <!-- 底部信息 -->
      <div class="room-footer">
        <div class="room-features">
          <div class="feature-item">
            <van-icon name="home-o" size="12" />
            <span>精装修</span>
          </div>
          <div class="feature-item">
            <van-icon name="fire-o" size="12" />
            <span>热门</span>
          </div>
        </div>
        <div class="view-detail">
          <span>查看详情</span>
          <van-icon name="arrow" size="12" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { RoomInterface } from "@/api/search/types";
import type { PropType } from "vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { showToast } from "vant";

const router = useRouter();
const isFavorite = ref(false);

const props = defineProps({
  // 房间的信息数据
  data: {
    type: Object as PropType<RoomInterface>,
    default: () => ({}),
    readOnly: true
  }
});

// 跳转到房间的详情页面
const goRoomDetail = () => {
  router.push({ path: "/roomDetail", query: { id: props.data.id } });
};

// 切换收藏状态
const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value;
  showToast(isFavorite.value ? "已收藏" : "已取消收藏");
};
</script>

<style scoped lang="less">
.room-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }

  &:active {
    transform: translateY(-2px);
  }
}

.room-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.room-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }
}

.image-error,
.image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f5f5f5;
  color: #999;
  font-size: 12px;
  gap: 8px;
}

.price-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.price-symbol {
  font-size: 12px;
}

.price-amount {
  font-size: 16px;
  font-weight: 700;
}

.price-unit {
  font-size: 10px;
  opacity: 0.9;
}

.favorite-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
  }
}

.room-info {
  padding: 16px;
}

.room-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.title-text {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  line-height: 1.4;
  flex: 1;
  margin-right: 8px;
}

.room-status {
  flex-shrink: 0;
}

.location-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.location-icon {
  color: #667eea;
  font-size: 14px;
}

.location-text {
  font-size: 13px;
  color: #7f8c8d;
  line-height: 1.4;
}

.tags-container {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.room-tag {
  border-radius: 12px;
  font-size: 11px;
  padding: 2px 8px;
  border-color: #667eea;
  color: #667eea;
}

.more-tags {
  font-size: 11px;
  color: #bdc3c7;
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 8px;
}

.room-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.room-features {
  display: flex;
  gap: 12px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #95a5a6;
}

.view-detail {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #667eea;
  font-weight: 500;
}

// 响应式设计
@media (max-width: 480px) {
  .room-image-container {
    height: 180px;
  }

  .room-info {
    padding: 14px;
  }

  .title-text {
    font-size: 15px;
  }

  .price-amount {
    font-size: 15px;
  }

  .tags-container {
    margin-bottom: 14px;
  }
}

// 暗色模式适配
html.dark {
  .room-card {
    background: rgba(28, 28, 30, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }

  .title-text {
    color: #f5f5f5;
  }

  .location-text {
    color: #a0a0a0;
  }

  .feature-item {
    color: #8e8e93;
  }

  .more-tags {
    background: rgba(58, 58, 60, 0.8);
    color: #8e8e93;
  }
}
</style>
